<!--
 * @Description: 内容质量审核
 * @Author: lixianggang
 * @Date: 2022-10-19 11:08:37
 * @LastEditors: lixianggang
 * @LastEditTime: 2022-12-13 19:41:41
-->
<template>
  <div class="check-wrap">
    <NormalForm pageTitle="内容质量审核" :operateForm="queryForm" :formList="formList" :enumOpt="enumOpt" @handleQuery="handleQuery" @handleReset="handleReset"></NormalForm>
    <div class="g-card mt16 table-card">
      <el-table v-loading="tableLoading" :data="tableData" :row-style="{ height: '40px' }" height="calc(100% - 55px)">
        <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
        <el-table-column align="center" label="名称" prop="contentName" width="180" show-overflow-tooltip>
          <template slot-scope="scope">
            <div @click="showMedia(scope.row)" class="create-by media">
              {{scope.row.contentName}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="内容类型" prop="contentType" width="130"></el-table-column>
        <el-table-column align="center" label="创建时间" prop="createTime" width="180"></el-table-column>
        <el-table-column align="center" label="创建人" prop="createBy" width="130">
          <template slot-scope="scope">
            <div class="create-by"> {{ scope.row.createBy }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核状态" prop="count" width="130">
          <template slot-scope="scope">
            <el-tag :type="['info', 'success', 'danger'][scope.row.auditStatus]">
              {{['未审核', '审核通过', '审核不通过'][scope.row.auditStatus]}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column :width="180" align="center" label="审核时间" prop="auditTime"></el-table-column>
        <el-table-column :width="130" align="center" label="审核人" prop="auditBy"></el-table-column>
        <el-table-column :width="240" align="center" label="备注" prop="auditRemark" show-overflow-tooltip>
          <template slot-scope="scope">
            <div>{{ scope.row.auditRemark || '-' }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" min-width="140">
          <template slot-scope="scope">
            <el-button v-has-permi="['operate:content:audit']" :disabled="scope.row.auditStatus !== '0'" type="text" @click="checkContent(scope.row)">
              审核
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
    </div>
    <!-- 审核弹窗 -->
    <el-dialog :visible.sync="checkVisible" title="审核" width="40%">
      <el-form ref="checkForm" :model="checkForm" :rules="rules" label-width="120px">
        <el-form-item label="审核结果" prop="auditStatus">
          <el-radio-group v-model="checkForm.auditStatus">
            <el-radio label="1">通过</el-radio>
            <el-radio label="2">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择分组" prop="categoryId">
          <el-select v-model="checkForm.categoryId" placeholder="请选择分组" style="width: 100%;">
            <el-option v-for="item in companyGroupList" :key="item.id" :label="item.name"
                       :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="auditRemark">
          <el-input v-model="checkForm.auditRemark" clearable maxlength="126" rows="4" show-word-limit
                    type="textarea"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelCheck">取 消</el-button>
        <el-button :loading="saveLoading" type="primary" @click="saveCheck">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="imageMediaVisible" title="查询素材" width="40%">
      <el-image :src="mediaUrl"></el-image>
    </el-dialog>
    <el-dialog :visible.sync="videoMediaVisible" class="video-class" title="查询素材" width="40%">
      <video controls>
        <source :src="mediaUrl" type="video/mp4"/>
      </video>
    </el-dialog>
    <el-dialog :visible.sync="audioMediaVisible" class="video-class" title="查询素材" width="40%">
      <audio :src="mediaUrl" autoplay="autoplay" controls="controls"></audio>
    </el-dialog>
  </div>
</template>

<script>
import {contentCheck, getContentCheckList} from '@/api/operate/contentCheck'
import {getFileVerbal, getGroupList, getVerbal} from '@/api/operate/verbalTrick'

export default {
  data() {
    return {
      queryForm: {
        contentName: '',
        auditStatus: '',
        contentType: '',
        dateRange: [],
        pageNum: 1,
        pageSize: 20
      },
      formList: [
        {
          label: '内容名称',
          value: '',
          prop: 'contentName',
          type: 'INPUT',
          emunName: ''
        },
        {
          label: '审核状态',
          value: '',
          prop: 'auditStatus',
          type: 'SELECT',
          emunName: 'auditStatusList'
        },
        {
          label: '内容类型',
          value: '',
          prop: 'contentType',
          type: 'SELECT',
          emunName: 'contentTypeList'
        },
        {
          label: '审核',
          value: [],
          prop: 'dateRange',
          type: 'DATE_RANGE',
          formate: 'yyyy-MM-dd',
          emunName: ''
        },
      ],
      enumOpt: {
        auditStatusList: [],
        contentTypeList: []
      },
      tableLoading: false,
      tableData: [],
      total: 0,
      saveLoading: false,
      checkVisible: false,
      checkForm: {
        auditStatus: '',
        auditRemark: '',
        categoryId: ''
      },
      rules: {
        auditStatus: [{required: true, message: '请选择审核结果', trigger: 'change'}],
        categoryId: [{required: true, message: '请选择分组', trigger: 'change'}]
      },
      companyGroupList: [],
      imageMediaVisible: false,
      videoMediaVisible: false,
      audioMediaVisible: false,
      mediaUrl: ''
    }
  },
  mounted() {
    this.getDicts('review_status').then((res) => {
      if (res.code === 200) {
        this.enumOpt.auditStatusList = res.data
      }
    })
    this.getDicts('content_type').then((res) => {
      if (res.code === 200) {
        this.enumOpt.contentTypeList = res.data
      }
    })
    this.handleQuery()
  },
  methods: {
    async showMedia(row) {
      //问卷
      if(+row.materialType === 10){
        this.$router.push({
          name: 'FormManage/details',
          query: {
            id: row.materialId || '',
            levelType: '1',
            is_person: '99'
          }
        })
        return
      }

      // 文件
      if (+row.materialType === 3) {
        let res2 = await getFileVerbal(row.materialId)
        if (res2.code !== 200 || !res2.data) {
          this.$message.info('未获取到文件资源')
          return
        }
        this.$router.push({
          path: 'LookFile',
          query: {
            id: res2.data.fileId,
            fileInfo: res2.data,
            is_person: '99'
          }
        })
        return
      }

      let res = await getVerbal(row.materialId)
      if (res.code !== 200 || !res.data) {
        this.$message.info('未获取到文件资源')
        return
      }

      //文章
      if (row.materialType === 4) {
        this.$router.push({
          name: 'Article/Info',
          query: { id: row.materialId, is_person: '99' }
        })
        return
      }
      // 海报
      if (row.materialType === 5) {
        this.imageMediaVisible = true
        this.mediaUrl = res.data.coverUrl || ''
      }
      // 话术
      if (row.materialType === 8) {
        this.$router.push({
          path: 'CheckDetail',
          query: {
            id: res.data.id || '',
            sendNum: res.data.sendNum || 0,
            levelType: res.data.levelType || '',
            is_person:'99',
          }
        })
      }
      // 多媒体
      if (row.materialType === 7) {
        // 多媒体
        if (res.data?.content === '5') {
          // 图片
          this.imageMediaVisible = true
          this.mediaUrl = res.data?.materialUrl
        }
        if (res.data?.content === '6') {
          // 视频
          this.videoMediaVisible = true
          this.mediaUrl = res.data?.materialUrl
        }
        if (res.data?.content === '7') {
          // 视频
          this.audioMediaVisible = true
          this.mediaUrl = res.data?.materialUrl
        }
      }

      //链接
      if(row.materialType === 11){
        this.$router.push({
          name: 'LinkManage/edit',
          query: {
            id: res.data.id || '',
            levelType: res.data.levelType || '',
            mediaType: 11,
            is_person: '99',
            operate: 'DETAIL'
          }
        })
      }
    },
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getContentCheckListFn();
    },
    getContentCheckListFn() {
      const params = {
        contentName: this.queryForm.contentName,
        auditStatus: this.queryForm.auditStatus,
        contentType: this.queryForm.contentType,
        startDate: this.queryForm.dateRange?.[0],
        endDate: this.queryForm.dateRange?.[1],
        pageNum: this.queryForm.pageNum,
        pageSize: this.queryForm.pageSize,
      }
      this.tableLoading = true
      getContentCheckList(params).then(res => {
        if (res.code === 200) {
          this.tableData = res.rows || []
          this.total = res.total || 0
        }
        this.tableLoading = false
      })
    },
    handleReset() {
      this.queryForm = {
        contentName: '',
        auditStatus: '',
        contentType: '',
        dateRange: [],
        pageNum: 1,
        pageSize: 20
      }
      this.getContentCheckListFn()
    },
    handleSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.getContentCheckListFn()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.getContentCheckListFn()
    },
    checkContent(row) {
      this.currentRow = row
      // 查询该条审核数据的详细信息
      const params = {
        levelType: 0,
        mediaType: this.currentRow.materialType
      }
      this.pageLoading = true
      getGroupList(params).then(res => {
        this.pageLoading = false
        if (res.code === 200) {
          this.companyGroupList = res.data || []
        }
        this.checkVisible = true
      })
    },
    saveCheck() {
      this.$refs.checkForm.validate((valid) => {
        if (valid) {
          this.handleCheck()
        } else {
          return false
        }
      })
    },
    handleCheck() {
      const params = {
        ...this.checkForm,
        auditId: this.currentRow.auditId,
        materialId: this.currentRow.materialId,
        contentId: this.currentRow.contentId
      }
      this.saveLoading = true
      contentCheck(params)
        .then(res => {
          this.saveLoading = false
          if (res.code === 200) {
            this.checkVisible = false
            this.$message.success('审核成功')
            this.getContentCheckListFn()
          }
        })
        .catch(err => {
          this.saveLoading = false
        })
    },
    cancelCheck() {
      this.checkVisible = false
      this.$refs.checkForm.resetFields()
    },
  },
}
</script>

<style lang="scss" scoped>
@import "../../../styles/base.scss";

.check-wrap {
  height: 100%;
  .table-card {
    height: calc(100% - 132px) !important;
    padding: 20px;
    .create-by {
      color: #082aff;
    }
    .media {
      cursor: pointer;
    }
  }
  .el-tag.el-tag--success {
    background-color: #e6f9ef !important;
    border-color: #06c160 !important;
    color: #06c160 !important;
  }

  .el-tag.el-tag--info {
    background-color: #f4f4f5 !important;
    border-color: #909399 !important;
    color: #909399 !important;
  }
}

.video-class {
  height: 100%;
  video {
    max-height: 500px;
    width: 100%;
  }
}

</style>
